<template>
  <div class="main">
    <button @click="drawCircleArea">绘制圆形区域</button>
    <button @click="drawParallelogramArea">绘制平行四边形区域</button>
    <button @click="drawSquareArea">绘制正方形区域</button>
    <button @click="drawCylinderArea">绘制圆柱区域</button>
    <button @click="drawPipelineTrack">绘制三维管道轨迹</button>
    <button @click="drawRectangularPipelineTrack">绘制长方体管道</button>
    <button @click="drawLinePath">绘制折线轨迹</button>
    <button @click="toggleGridVisibility">切换网格显示</button>
    <button @click="toggleGridLineMode">切换线框模式</button>
    <div id="cesiumContainer"></div>
  </div>
</template>


<script>
import axios from 'axios';
import { drawCircleArea, drawParallelogramArea, drawSquareArea } from '@/utils/draw2DShapes.js';
import { drawCylinderArea } from '@/utils/draw3DShapes.js';
import { draw3DPipelineTrack, draw3DRectangularPipelineTrack } from '@/utils/drawPipeline.js';
import { drawLine } from '@/utils/drawPath.js';
import { drawCylinderAreaM1, draw3DRectangularPipelineTrackM1, draw3DPolygonalPrismM1, draw3DRectangularPipelineTrackM1_2 } from '@/utils/draw3D-hometest.js';
import * as XLSX from 'xlsx';  // 导入xlsx库
import { saveAs } from 'file-saver';  // 导入file-saver库

export default {
  data() {
    return {
      viewer: null,
      gridVisible: true, // 初始网格显示状态
      buildingData: [
        { buildingId: 1, lon: 113.5424173, lat: 22.13756693, height: 3 },
        { buildingId: 1, lon: 113.5424126, lat: 22.13756805, height: 0 },
        { buildingId: 1, lon: 113.5424073, lat: 22.13756986, height: 3 },
        { buildingId: 1, lon: 113.5424022, lat: 22.13757215, height: 0 },
        { buildingId: 1, lon: 113.5423974, lat: 22.13757488, height: 3 },
        { buildingId: 1, lon: 113.5423929, lat: 22.13757803, height: 0 },
        { buildingId: 1, lon: 113.5423888, lat: 22.13758158, height: 3 },
        { buildingId: 1, lon: 113.542385, lat: 22.13758548, height: 0 },
        { buildingId: 1, lon: 113.5423817, lat: 22.13758971, height: 3 },
        { buildingId: 1, lon: 113.5423788, lat: 22.13759423, height: 0 },
        { buildingId: 1, lon: 113.5423764, lat: 22.13759898, height: 3 },
        { buildingId: 1, lon: 113.5423745, lat: 22.13760393, height: 0 },
        { buildingId: 1, lon: 113.5423732, lat: 22.13760902, height: 3 },
        { buildingId: 1, lon: 113.5423723, lat: 22.13761421, height: 0 },
        { buildingId: 1, lon: 113.5423721, lat: 22.13761946, height: 3 },
        { buildingId: 1, lon: 113.542372, lat: 22.13769824, height: 0 },
        { buildingId: 1, lon: 113.5423723, lat: 22.13770357, height: 3 },
        { buildingId: 1, lon: 113.5423731, lat: 22.13770884, height: 0 },
        { buildingId: 1, lon: 113.5423745, lat: 22.13771401, height: 3 },
        { buildingId: 1, lon: 113.5423765, lat: 22.13771903, height: 0 },
        { buildingId: 1, lon: 113.5423789, lat: 22.13772384, height: 3 },
        { buildingId: 1, lon: 113.5423819, lat: 22.1377284, height: 0 },
        { buildingId: 1, lon: 113.5423853, lat: 22.13773267, height: 3 },
        { buildingId: 1, lon: 113.5423892, lat: 22.1377366, height: 0 },
        { buildingId: 1, lon: 113.5423934, lat: 22.13774016, height: 3 },
        { buildingId: 1, lon: 113.5423981, lat: 22.1377433, height: 0 },
        { buildingId: 1, lon: 113.542403, lat: 22.13774601, height: 3 },
        { buildingId: 1, lon: 113.5424082, lat: 22.13774825, height: 0 },
        { buildingId: 1, lon: 113.5424136, lat: 22.13775, height: 3 },
        { buildingId: 1, lon: 113.5424191, lat: 22.13775124, height: 0 },
        { buildingId: 1, lon: 113.5424209, lat: 22.13775147, height: 3 },
        { buildingId: 1, lon: 113.5424227, lat: 22.13775378, height: 0 },
        { buildingId: 1, lon: 113.5424265, lat: 22.13775769, height: 3 },
        { buildingId: 1, lon: 113.5424307, lat: 22.13776124, height: 0 },
        { buildingId: 1, lon: 113.5424352, lat: 22.1377644, height: 3 },
        { buildingId: 1, lon: 113.54244, lat: 22.13776713, height: 0 },
        { buildingId: 1, lon: 113.5424451, lat: 22.13776941, height: 3 },
        { buildingId: 1, lon: 113.5424503, lat: 22.13777123, height: 0 },
        { buildingId: 1, lon: 113.5424558, lat: 22.13777255, height: 3 },
        { buildingId: 1, lon: 113.5424614, lat: 22.13777337, height: 0 },
        { buildingId: 1, lon: 113.542467, lat: 22.13777368, height: 3 },
        { buildingId: 1, lon: 113.5428408, lat: 22.13777724, height: 0 },
        { buildingId: 1, lon: 113.5428465, lat: 22.13777703, height: 3 },
        { buildingId: 1, lon: 113.5428521, lat: 22.13777631, height: 0 },
        { buildingId: 1, lon: 113.5428576, lat: 22.13777508, height: 3 },
        { buildingId: 1, lon: 113.5428629, lat: 22.13777335, height: 0 },
        { buildingId: 1, lon: 113.5428681, lat: 22.13777115, height: 3 },
        { buildingId: 1, lon: 113.542873, lat: 22.13776848, height: 0 },
        { buildingId: 1, lon: 113.5428776, lat: 22.13776538, height: 3 },
        { buildingId: 1, lon: 113.5428818, lat: 22.13776188, height: 0 },
        { buildingId: 1, lon: 113.5428857, lat: 22.13775801, height: 3 },
        { buildingId: 1, lon: 113.5428891, lat: 22.1377538, height: 0 },
        { buildingId: 1, lon: 113.542892, lat: 22.1377493, height: 3 },
        { buildingId: 1, lon: 113.5428945, lat: 22.13774456, height: 0 },
        { buildingId: 1, lon: 113.5428965, lat: 22.13773961, height: 3 },
        { buildingId: 1, lon: 113.5428979, lat: 22.1377345, height: 0 },
        { buildingId: 1, lon: 113.5428988, lat: 22.13772928, height: 3 },
        { buildingId: 1, lon: 113.5428992, lat: 22.13772401, height: 0 },
        { buildingId: 1, lon: 113.5429009, lat: 22.1375944, height: 3 },
        { buildingId: 1, lon: 113.5429007, lat: 22.1375891, height: 0 },
        { buildingId: 1, lon: 113.5428999, lat: 22.13758385, height: 3 },
        { buildingId: 1, lon: 113.5428986, lat: 22.1375787, height: 0 },
        { buildingId: 1, lon: 113.5428968, lat: 22.13757369, height: 3 },
        { buildingId: 1, lon: 113.5428944, lat: 22.13756888, height: 0 },
        { buildingId: 1, lon: 113.5428915, lat: 22.13756431, height: 3 },
        { buildingId: 1, lon: 113.5428882, lat: 22.13756002, height: 0 },
        { buildingId: 1, lon: 113.5428845, lat: 22.13755605, height: 3 },
        { buildingId: 1, lon: 113.5428803, lat: 22.13755245, height: 0 },
        { buildingId: 1, lon: 113.5428758, lat: 22.13754925, height: 3 },
        { buildingId: 1, lon: 113.5428709, lat: 22.13754648, height: 0 },
        { buildingId: 1, lon: 113.5428658, lat: 22.13754416, height: 3 },
        { buildingId: 1, lon: 113.5428605, lat: 22.13754232, height: 0 },
        { buildingId: 1, lon: 113.542855, lat: 22.13754098, height: 3 },
        { buildingId: 1, lon: 113.5428494, lat: 22.13754015, height: 0 },
        { buildingId: 1, lon: 113.5428437, lat: 22.13753983, height: 3 },
        { buildingId: 1, lon: 113.5424699, lat: 22.13753628, height: 0 },
        { buildingId: 1, lon: 113.5424642, lat: 22.13753648, height: 3 },
        { buildingId: 1, lon: 113.5424585, lat: 22.13753722, height: 0 },
        { buildingId: 1, lon: 113.542453, lat: 22.13753846, height: 3 },
        { buildingId: 1, lon: 113.5424476, lat: 22.13754022, height: 0 },
        { buildingId: 1, lon: 113.5424424, lat: 22.13754245, height: 3 },
        { buildingId: 1, lon: 113.5424375, lat: 22.13754516, height: 0 },
        { buildingId: 1, lon: 113.5424329, lat: 22.1375483, height: 3 },
        { buildingId: 1, lon: 113.5424287, lat: 22.13755185, height: 0 },
        { buildingId: 1, lon: 113.5424248, lat: 22.13755578, height: 3 },
        { buildingId: 1, lon: 113.5424214, lat: 22.13756004, height: 0 },
        { buildingId: 1, lon: 113.5424184, lat: 22.13756459, height: 3 },
        { buildingId: 1, lon: 113.5424173, lat: 22.13756693, height: 0 }
      ],

    };
  },
  mounted() {
    this.initializeCesium();
    this.loadBuildingData();
  },
  methods: {
    async loadBuildingData() {
      try {
        const response = await axios.get('/gisdata/1106data.json'); // 加载 JSON 文件
        this.buildingData = response.data; // 将 JSON 数据存储到 buildingData
        this.drawAllBuildings(); // 在数据加载完成后开始绘制
      } catch (error) {
        console.error('加载建筑数据时出错：', error);
      }
    },
    getGridsInArea(minLat, maxLat, minLon, maxLon, minHeight, maxHeight, level) {
      // 设置步长，步长决定经纬度和高度范围的间隔
      const latStep = 0.0001; // 可根据网格精度调整
      const lonStep = 0.0001; // 可根据网格精度调整
      const heightStep = 0.01; // 可根据需求调整高度步长，单位根据你的高度单位设定

      // 使用 Set 来存储唯一的网格编码
      let gridSet = new Set();
      let gridData = [];

      // 遍历纬度范围
      for (let lat = minLat; lat <= maxLat; lat += latStep) {
        // 遍历经度范围
        for (let lon = minLon; lon <= maxLon; lon += lonStep) {
          // 遍历高度范围
          for (let height = minHeight; height <= maxHeight; height += heightStep) {
            // 调用工具函数获取网格编码，包含高度
            const gridCode = Xmap.AirspaceManage.HierarchicalGrid.EveryLevelCoding(level, lon, lat, height);
            // 将网格编码添加到 Set 中（自动去重）
            gridSet.add(gridCode);
          }
        }
      }

      // 将 Set 转换为数组
      const uniqueGrids = Array.from(gridSet);

      // 遍历每个网格编码，调用 CodingToBLH 获取经纬度和高度范围
      uniqueGrids.forEach(gridCode => {
        // 调用 CodingToBLH 函数获取网格的经纬度和高度范围
        const llh = Xmap.AirspaceManage.HierarchicalGrid.CodingToBLH(gridCode);

        // 检查 gridCode 是否以“10”结尾，如果是，则手动调整高度范围和中心高度
        let heightRange, centerHeight;
        if (gridCode.endsWith("10")) {
          // 特殊处理：以"10"结尾的网格，设置自定义的高度范围和中心高度
          heightRange = "0.27, 0.3"; // 根据需求设定新的高度范围
          centerHeight = 0.285; // 中心高度设定为新高度范围的中心
        } else {
          // 常规处理
          heightRange = llh.height.join(", "); // 高度数组
          centerHeight = llh.center.height;
        }

        // 保存网格编码和经纬度高度范围到 gridData 数组中
        gridData.push({
          gridCode: gridCode,
          latitudeRange: llh.B.join(", "), // 纬度数组
          longitudeRange: llh.L.join(", "), // 经度数组
          heightRange: heightRange, // 使用调整后的或默认高度范围
          centerLat: llh.center.B, // 中心经度
          centerLon: llh.center.L, // 中心纬度
          centerHeight: centerHeight // 使用调整后的或默认中心高度
        });
      });

      console.log("导出网格信息计算完毕", gridData)

      // 创建 Excel 数据表
      const worksheet = XLSX.utils.json_to_sheet(gridData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Grid Data");

      // 将工作簿转为二进制数据
      const wbout = XLSX.write(workbook, { bookType: "xlsx", type: "array" });

      // 使用FileSaver.js将文件保存为grid_data.xlsx
      const blob = new Blob([wbout], { type: "application/octet-stream" });
      saveAs(blob, "grid_data.xlsx");
      console.log("导出网格信息保存完毕")

      // 返回所有网格的经纬度和高度数据
      return gridData;
    },
    async initializeCesium() {
      try {

        // this.viewer = new Cesium.Viewer('cesiumContainer', {
        //   sceneModePicker: false,
        //   baseLayerPicker: false,
        //   geocoder: false,
        //   homeButton: false,
        //   navigationHelpButton: false,
        //   infoBox: false,
        //   timeline: false, // 移除时间轴
        //   animation: false // 移除动画控件
        // });
        // this.viewer.scene.frameState.creditDisplay.container.style.display = 'none';


        // GIS
        this.viewer = new Xmap.Viewer('cesiumContainer');

        // 使用 Fly 操作将相机飞行到指定位置
        Xmap.Operates.Fly.camaraFlyToPosition({
          lng: 113.542894531215,
          lat: 22.13774456,
          height: 10000
        }, null, 0);

        // // 1. 默认动态显示图层接口
        // Xmap.AirspaceManage.HierarchicalGrid.ShowGridsWithLevelDynamic();

        // const amapimg = Xmap.Layers.BaseLayer.createImageryProvider('amap', {
        //   style: 'img',
        //   crs: 'WGS84',
        // });
        // const amapimg = Xmap.AirspaceManage.HierarchicalGrid.createImageryProvider('xyz', { url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' })
        this.viewer.viewer.imageryLayers.addImageryProvider(
          new Cesium.OpenStreetMapImageryProvider({
            // url: `http://192.168.0.135:8001/rsimageofhigh`,
            url: process.env.VUE_APP_MAP,
            fileExtension: 'png',
            maximumLevel: 19
          })
        )


        // 加载 glTF (`glb`) 文件
        // const model = this.viewer.viewer.scene.primitives.add(
        //   Cesium.Model.fromGltf({
        //     url: '/3Dcity/stl2glb.glb',  // 这里是 public 目录下的路径
        //     modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
        //       Cesium.Cartesian3.fromDegrees(113.54, 22.1377, 100) // 设置经纬度和高度
        //     ),
        //     scale: 1.0 // 调整缩放比例
        //   })
        // );
        // Cesium.Model.fromGltfAsync({
        //   url: '/3Dcity/V1OBJ.glb', // 确保 `glb` 路径正确
        //   modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
        //     Cesium.Cartesian3.fromDegrees(113.542894531215, 22.13774456, 100) // 经纬度 & 高度
        //   ),
        //   scale: 1.0
        // }).then((model) => {
        //   this.viewer.viewer.scene.primitives.add(model); // 确保 `this.viewer.viewer` 结构正确
        //   this.viewer.viewer.zoomTo(model);
        // }).catch((error) => {
        //   console.error("Cesium Model 加载失败:", error);
        // });
        // const model = this.viewer.viewer.scene.primitives.add(
        //   Cesium.Model.fromGltf({
        //     url: '/3Dcity/V1OBJ.glb',
        //     modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
        //       Cesium.Cartesian3.fromDegrees(113.542894531215, 22.13774456, 100)
        //     ),
        //     scale: 1.0
        //   })
        // );
        // this.viewer.viewer.zoomTo(model);
        // async function loadModel() {
        //   try {
        //     // 1. 先创建 Cesium Viewer
        //     const viewer = this.viewer.viewer; // 确保 `this.viewer.viewer` 存在

        //     // 2. 使用 `fromGltfAsync()` 加载 `glb` 文件
        //     const model = await Cesium.Model.fromGltfAsync({
        //       url: '/3Dcity/V1OBJ.glb', // 确保路径正确
        //       modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
        //         Cesium.Cartesian3.fromDegrees(113.542894531215, 22.13774456, 100) // 经纬度 & 高度
        //       ),
        //       scale: 1.0 // 适当调整缩放
        //     });

        //     // 3. 添加模型到 Cesium 场景
        //     viewer.scene.primitives.add(model);

        //     // 4. 让摄像机聚焦到模型
        //     viewer.zoomTo(model);

        //   } catch (error) {
        //     console.error("🚨 Cesium Model 加载失败:", error);
        //   }
        // }

        // 调用函数
        // loadModel();




        // // 加载3dtiles模型数据
        // Xmap.AirspaceManage.HierarchicalGrid.load3dtiles('http://192.168.0.135:9027/prod-api/static/3dtiles3/tileset.json')
        // 全国高程数据
        Xmap.AirspaceManage.HierarchicalGrid.loadDEM(process.env.VUE_APP_HEIGHT_MAP, true)
        console.log("this.viewer", this.viewer)
        // 加载3dtiles模型数据
        Xmap.AirspaceManage.HierarchicalGrid.load3dtiles('http://192.168.0.135:9027/prod-api/static/3dtiles3/tileset.json')
        //  Xmap.AirspaceManage.HierarchicalGrid.load3dtiles('http://192.168.0.135:8003/terrain')
        // 获取鼠标点击的位置
        let canvas = this.viewer.viewer.scene.canvas;
        let handler = new Cesium.ScreenSpaceEventHandler(canvas);
        const that = this
        handler.setInputAction(function (lclickment) {

          let scene = that.viewer.viewer.scene;
          let ellipsoid = scene.globe.ellipsoid;
          //let cartesian = LoadCesium.Viewer.camera.pickEllipsoid(lclickment.position, ellipsoid);
          let cartesian = that.viewer.viewer.scene.pickPosition(lclickment.position);
          let pinBuilder = new Cesium.PinBuilder();
          if (cartesian) {
            let cartographic = ellipsoid.cartesianToCartographic(cartesian);
            let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(7);
            let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(7);
            //地理高度
            //height = (cartographic.height+1).toFixed(2);
            //相机高度
            let height = that.viewer.viewer.camera.positionCartographic.height.toFixed(0);
            //方向   围绕Z轴旋转
            let heading = Cesium.Math.toDegrees(that.viewer.viewer.camera.heading).toFixed(2);
            //倾斜角度   围绕Y轴旋转
            let pitch = Cesium.Math.toDegrees(that.viewer.viewer.camera.pitch).toFixed(2);
            //围绕X轴旋转
            let roll = Cesium.Math.toDegrees(that.viewer.viewer.camera.roll).toFixed(2);
            console.log('lon:' + lon + ";" + 'lat:' + lat + ";" + 'height:' + height);
            console.log('heading:' + heading + ';' + 'pitch:' + pitch + ';' + 'roll:' + roll)
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // Xmap.Layers.BaseLayer.addBaseLayer([
        //   { layer: amapimg, index: 0 },
        // ]);
        // console.log("this.viewer", this.viewer)
        // //  3.  经纬度高度与网格编码转换
        // const griddingNumber = Xmap.AirspaceManage.HierarchicalGrid.EveryLevelCoding(2, 113, 45, 15);
        // console.log(griddingNumber);
        // const llh = Xmap.AirspaceManage.HierarchicalGrid.CodingToBLH('VHJHW3Z6BEJK1010');
        // console.log('我要查找的网格信息llh', llh);
        // const llh2 = Xmap.AirspaceManage.HierarchicalGrid.CodingToBLH('VHJHW3Z6BEJK101');
        // console.log('我要查找的网格信息llh2', llh2);

        // 使用你的范围进行调用
        // const minLat = 22.1248;
        // const maxLat = 22.1592;
        // const minLon = 113.4774;
        // const maxLon = 113.5382;
        // const minHeight = 0; // 设置最小高度
        // const maxHeight = 0.45; // 设置最大高度
        // const level = 8; // 根据你需要的层级设置
        const minLat = 22.1268; // 将纬度范围缩小
        const maxLat = 22.1272;
        const minLon = 113.4880; // 将经度范围缩小
        const maxLon = 113.4900;
        const minHeight = 0; // 设置最小高度
        const maxHeight = 0.45; // 设置最大高度
        const level = 8; // 根据你需要的层级设置
        // this.getGridsInArea(minLat, maxLat, minLon, maxLon, level);
        // this.getGridsInArea(minLat, maxLat, minLon, maxLon, minHeight, maxHeight, level);
        // // 4. 实现网格的线框模式
        // Xmap.AirspaceManage.HierarchicalGrid.WireframeForLevelGrids(2, true);

        // // 5. 控制单个网格的显隐状态
        // Xmap.AirspaceManage.HierarchicalGrid.SetStyleForSingleGrid('VKJA101', { r: 100 / 255, g: 100 / 255, b: 100 / 255, a: 1 }, true);

        // // 7. 各层级网格编码计算与显示
        // Xmap.AirspaceManage.HierarchicalGrid.CodeVisibleForLevelGrids(2, false);

        // // 8. 根据城市模型生成其覆盖的网格范围并显示
        // Xmap.AirspaceManage.HierarchicalGrid.loadCityGrids({
        //   B: 34.45,
        //   L: 112.3,
        //   height: 234
        // }, 2);
        // // 11.鼠标框选网格后返回所有框选的网格编号
        // Xmap.AirspaceManage.HierarchicalGrid.AddGeographic('Cylinder', { r: 100 / 255, g: 100 / 255, b: 100 / 255, a: 0.6 });
        // this.viewer = new Cesium.Viewer('cesiumContainer', {
        //   sceneModePicker: false,
        //   baseLayerPicker: false,
        //   geocoder: false,
        //   homeButton: false,
        //   navigationHelpButton: false,
        //   infoBox: false,
        //   timeline: false,
        //   animation: false
        // });
        // this.viewer.scene.frameState.creditDisplay.container.style.display = 'none';

        // // 设置初始相机视图
        // this.viewer.camera.setView({
        //   destination: Cesium.Cartesian3.fromDegrees(113.5, 22.1, 10000)
        // });

        // 加载并绘制建筑物数据
        await this.drawAllBuildings();
      } catch (error) {
        console.error('Cesium initialization failed:', error);
      }
    },
    /**
     * 绘制所有建筑物多边体
     */
    drawAllBuildings() {
      // 将相同的 buildingId 的数据组合成单个建筑物
      const buildings = {};
      this.buildingData.forEach(point => {
        if (!buildings[point.buildingId]) {
          buildings[point.buildingId] = { positions: [], pointNames: [], minHeight: Infinity, maxHeight: -Infinity };
        }

        // 更新该建筑物的最低和最高高度
        buildings[point.buildingId].minHeight = Math.min(buildings[point.buildingId].minHeight, point.height);
        buildings[point.buildingId].maxHeight = Math.max(buildings[point.buildingId].maxHeight, point.height);

        // 添加点的经纬度
        buildings[point.buildingId].positions.push(point.lon, point.lat);

        // 标注名称
        buildings[point.buildingId].pointNames.push(`点${buildings[point.buildingId].positions.length / 2}`);
      });

      console.log("绘制的数据", buildings);

      // 绘制每个建筑物
      Object.values(buildings).forEach(building => {
        // 使用每个建筑物的 minHeight 和 maxHeight
        this.drawBuilding(building.positions, building.minHeight, building.maxHeight, building.pointNames);
      });
    },

    /**
     * 使用 draw3DPolygonalPrismM1 绘制单个建筑物
     */
    drawBuilding(positions, minHeight, maxHeight, pointNames) {
      draw3DPolygonalPrismM1(this.viewer.viewer, positions, minHeight, maxHeight, 'BLUE', 0.5, pointNames);
      // 定义经纬度数组
      const positions1 = [
        113.544, 22.1369,    // 左上角

        113.548, 22.1369,   // 右上角
        113.552, 22.1365,

        113.552, 22.1358,   // 右下角

        113.552, 22.1354,
        113.551, 22.1354,
        113.551, 22.1358,

        113.544, 22.1358
      ];

      const minHeight1 = 0; // 柱状体底部高度
      const maxHeight1 = 10; // 柱状体顶部高度
      const pointNames1 = ['起点', '直线终点', '拐弯中点1', '拐弯中点2', '拐弯终点', '继续直线终点']; // 顶点名称

      // 调用 draw3DPolygonalPrismM1 函数绘制三维多边形柱状体
      draw3DPolygonalPrismM1(
        this.viewer.viewer,     // Cesium Viewer 对象
        positions1,              // 经纬度数组
        minHeight1,              // 柱状体底部高度
        maxHeight1,              // 柱状体顶部高度
        'BLUE',                 // 柱状体颜色
        0.5,                    // 柱状体透明度
        pointNames1              // 每个顶点的名称数组
      );
    },
    // 绘制圆形区域
    drawCircleArea() {
      drawCircleArea(this.viewer.viewer, 113.5, 22.05, 5000, 'BLUE', 0.5); // 圆心在113.5, 22.05，半径为5000米
      this.viewer.viewer.zoomTo(this.viewer.viewer.entities); // 缩放到圆形区域
    },

    // 绘制平行四边形区域
    drawParallelogramArea() {
      const positions = [113.3, 22.0, 113.4, 22.0, 113.45, 22.1, 113.35, 22.1]; // 平行四边形顶点
      drawParallelogramArea(this.viewer.viewer, positions, 'RED', 0.5); // 绘制平行四边形区域
      this.viewer.viewer.zoomTo(this.viewer.viewer.entities); // 缩放到平行四边形区域
    },

    // 绘制正方形区域
    drawSquareArea() {
      drawSquareArea(this.viewer.viewer, 113.5, 22.05, 10000, 'GREEN', 0.5); // 绘制中心在113.5, 22.05的正方形，边长为10000米
      this.viewer.viewer.viewerzoomTo(this.viewer.viewer.entities); // 缩放到正方形区域
    },

    // 绘制圆柱区域
    drawCylinderArea() {
      drawCylinderArea(this.viewer.viewer, 113.5, 22.1, 3000, 1000, 'YELLOW', 0.5); // 圆柱中心在113.5, 22.1，高度为3000米，半径为1000米
      this.viewer.viewer.zoomTo(this.viewer.viewer.entities); // 缩放到圆柱区域
    },

    // 绘制三维圆柱管道轨迹
    drawPipelineTrack() {
      const positions = [113.5, 22.3, 500, 113.55, 22.35, 3000, 113.6, 22.4, 500]; // 三段位置（起点 -> 高点 -> 终点）
      const radii = [50, 100, 150]; // 每段不同的半径，分别为50米、100米、150米

      draw3DPipelineTrack(this.viewer.viewer, positions, radii, 'YELLOW'); // 绘制每段不同半径的三维圆柱形管道
      this.viewer.viewer.zoomTo(this.viewer.viewer.entities); // 缩放到管道视图
    },


    // 绘制长方体管道
    drawRectangularPipelineTrack() {
      // 调整位置：确保与圆柱管道位置不同
      const positions = [113.5, 22.1, 500, 113.55, 22.15, 3000, 113.6, 22.2, 500]; // 起点 -> 高点 -> 终点
      const sizes = [[100, 50], [150, 80], [200, 100]]; // 每段不同的宽高
      draw3DRectangularPipelineTrack(this.viewer.viewer, positions, sizes, 'YELLOW'); // 绘制长方体形管道
      this.viewer.viewer.zoomTo(this.viewer.viewer.entities); // 缩放到管道视图
    },

    // 绘制折线轨迹
    drawLinePath() {
      const positions = [113.4, 22.1, 113.45, 22.15, 113.5, 22.2, 113.55, 22.15, 113.6, 22.1]; // 多段折线
      drawLine(this.viewer.viewer, positions, 'RED', '折线轨迹'); // 绘制红色折线
      this.viewer.viewer.zoomTo(this.viewer.viewer.entities); // 缩放到折线轨迹
    },

    toggleGridVisibility() {
      const payload = {
        gridshow: true, // 或者根据需要设置为 false
        level: 1 // 设置需要控制的层级
      };

      axios.post('/showGrids', payload)
        .then(response => {
          console.log('响应:', response.data);
          // 处理响应数据，例如更新组件状态或显示通知
        })
        .catch(error => {
          console.error('调用显示控制接口失败:', error);
          // 处理错误情况
        });
    },
    toggleGridLineMode() {
      this.isLineMode = !this.isLineMode; // 切换状态
      axios.post('/GridsLineMode', { isBoolean: this.isLineMode })
        .then(response => {
          console.log('线框模式已切换:', response.data.isBoolean); // 处理响应
          this.isLineMode = response.data.isBoolean; // 根据后端返回的确切状态更新
        })
        .catch(error => {
          console.error('调用线框模式接口失败:', error);
        });
    },
  },
};


</script>
